<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>{{ answerSheet['title'] }}</span>
        <el-button type="danger" size="small" style="float: right;">删除</el-button>
      </div>
      <div class="answer">
        <div class="info">
          <div>编号: {{ answerSheet['id'] }}</div>
          <div>渠道来源: {{ answerSheet['source'] }}</div>
          <div>开始时间: {{ answerSheet['start_time'] }}</div>
          <div>结束时间: {{ answerSheet['end_time'] }}</div>
        </div>
        <div class="questions">
          <div v-for="(item,index) in answerSheet['questions']" :key="index" class="question">
            <div class="title">{{ index+1 }} .&nbsp;&nbsp; {{ item.title }} {{ item.type===0?'':'（选填）' }}</div>
            <el-radio-group v-if="item['questionType']===0" v-model="item['answer']" class="option">
              <div v-for="(option,optionIndex) in item['options']" :key="optionIndex" class="item">
                <el-radio :label="optionIndex" :disabled="item['answer']!==optionIndex">{{ option['value'] }}</el-radio>
              </div>
            </el-radio-group>
            <el-checkbox-group v-if="item['questionType']===1" v-model="item['answer']" class="option">
              <div v-for="option in item['options']" :key="option" class="item">
                <el-checkbox :label="option">{{ option }}</el-checkbox>
              </div>
            </el-checkbox-group>
            <el-input
              v-if="item['questionType']===2"
              v-model="item['answer']"
              type="textarea"
              rows="5"
              class="option"
              maxlength="500"
              show-word-limit
              placeholder="请输入内容"/>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      answerSheet: {
        id: '001',
        title: '小汽车调查',
        source: '微信',
        start_time: '2019-04-21 16:30:00',
        end_time: '2019-04-21 17:30:00',
        questions: [{
          title: '您是否已经买车?',
          type: 0,
          questionType: 0,
          optionsType: 0,
          options: [{
            value: '买了'
          }, {
            value: '没买'
          }, {
            value: '考虑中'
          }],
          answer: 0
        }, {
          title: '您是否已经买房?',
          type: 0,
          questionType: 0,
          optionsType: 0,
          options: [{
            value: '买了'
          }, {
            value: '没买'
          }, {
            value: '考虑中'
          }],
          answer: 2
        }, {
          title: '您是否已经买房?',
          type: 0,
          questionType: 1,
          optionsType: 0,
          options: ['买了', '没买', '考虑中'],
          answer: ['买了', '没买']
        }, {
          title: '您是否已经买房?',
          type: 0,
          questionType: 2,
          answer: '卡机咖啡碱啊JFK安居客的飞机卢卡斯京东方卡死卡拉的风景爱看就啊'
        }]
      },
      answerSheetRules: {
        goods_name: [{ required: true, message: '请输入客户名', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id
    this.getAnswerSheetDetails()
  },
  methods: {
    getAnswerSheetDetails() {

    },

    toAddQuestionOptions(index) {
      this.answerSheet['question'][index]['options'].push({ value: '' })
    },

    toDeleteQuestionOptions(index, optionsIdx) {
      this.answerSheet['question'][index]['options'].splice(optionsIdx, 1)
    },

    toDeleteQuestion(index) {
      this.answerSheet['question'].splice(index, 1)
    },

    /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
    getUsersList() {
      const url = 'user/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.usersList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
  }

  .answer {
    .info {
      @include flex-row(center, space-between);
      font-size: 15px;
      color: $textGray;
      margin-bottom: 30px;
    }

    .questions {
      padding: 0 20px;
      .question {
        margin-bottom: 20px;

        .title {
          margin-bottom: 20px;
        }

        .option {
          margin-left: 30px;

          .item {
            margin-bottom: 15px;
          }
        }
      }
    }
  }

  .btn {
    width: 20%;
    min-width: 160px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
